import React, {useState} from 'react';
import {Modal, Form, Input, InputNumber, Button, Select, Radio} from "antd";
import ProForm, { ProFormText, ProFormSelect, ProFormDependency } from '@ant-design/pro-form';
const {Option} = Select;

function onChange3(value) {
  console.log('changed', value);
}


const layout = {
  labelCol: {span: 6},
  wrapperCol: {span: 17},
};


/* eslint-disable no-template-curly-in-string */
const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
    number: '${label} is not a valid number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};
/* eslint-enable no-template-curly-in-string */

const ConfigFrom = (props) => {

  const [value, setValue] = React.useState(1);

  const onChange = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  const onChange2 = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  const {isModalVisible, handleOk, handleCancel} = props
  //
  // const onFinish = (values: any) => {
  //   console.log(values);
  // };

  const handleSubmit = (values)=>{
    console.log(values)
  }

  const [pid,setPid] = useState('')

  return (
    <div>
      <Modal title="添加配置分类" visible={isModalVisible} onOk={handleOk} footer={false} onCancel={handleCancel}>
        <Form {...layout} name="nest-messages" onFinish={values => handleSubmit(values)} validateMessages={validateMessages}>
          <Form.Item noStyle shouldUpdate>
            {(form) => {
              return (
                <ProFormSelect
                  options={[
                    {
                      value: 'chapter',
                      label: '盖章后生效',
                    },
                    {
                      value: 'hello',
                      label: '你好',
                    },
                  ]}
                  width="md"
                  name="useMode"
                  label={`父级`}
                />
              );
            }}
          </Form.Item>
          <Form.Item name={['nickname']} label="分类名称">
            <Input/>
          </Form.Item>
          <Form.Item name={['name']} label="分类字段英文">
            <Input/>
          </Form.Item>
          <Form.Item name={['type']} label="类型">
            <Radio.Group onChange={onChange} value={value}>
              <Radio value={1}>系统</Radio>
              <Radio value={2}>其他</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item name={['status']} label="状态">
            <Radio.Group onChange={onChange2} value={value}>
              <Radio value={3}>显示</Radio>
              <Radio value={4}>隐藏</Radio>
            </Radio.Group>
          </Form.Item>


          <Form.Item name={['sort']} label="排序">
            <InputNumber min={0} max={10} defaultValue={0} onChange={onChange3}/>
          </Form.Item>

          <Form.Item wrapperCol={{...layout.wrapperCol, offset: 10}}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ConfigFrom;


